import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Hooks(props){
	  const {defaultValue,maxLength} = props
	  const [mainVal,setMainVal] = React.useState('')
	  const [mainValLen,setMainValLen] = React.useState('0')
	  
	  return (
	  	<div className="custom-input">
	    	<input type='text' defaultValue={defaultValue} onChange={(e)=>change(e)} value={mainVal} maxlength={maxLength}
	    
	    />
	    
	    {mainValLen}/{maxLength}
	    </div>
	  );
	  function change(e){
	    setMainVal(mainVal => e.target.value)
	    setMainValLen(mainValLen => mainVal.toString().length +1)
	  }
}

export default Hooks